<template>
	<view class="content">
		<!--房源详细-->
		<view class="content_1">
			<view class="house_view">
				<image class="house_img" :src="house_image"></image>
				<view class="house_detail">
					<view class="house_name">{{house_name}}</view>
					<view class="house_info">{{house_type}}·{{house_direction}}·{{house_area}}·{{house_floor}}</view>
					<view class="house_info">{{house_addr}}</view>
					<view class="house_tips">
						<view class="tips">{{house_tips1}}</view>
						<view class="tips">{{house_tips2}}</view>
					</view>
					<view class="house_money">¥ {{renthouse_money}}/月</view>
				</view>
			</view>
		</view>
		<!--我的租期-->
		<view class="content_2">
			<view class="title">我的租期</view>
			<view class="line_title"></view>
			<view class="time_view">
				<view class="remain_view">
					<view class="remain_text">剩余</view>
					<view class="remain_time">{{belefttime}}个月</view>
				</view>
				<view class="times">下次缴费日期：{{expire_time}}</view>
			</view>
		</view>
		<!--我的合同-->
		<view class="content_2" @click="GotoContract">
			<view class="title">我的合同</view>
			<view class="line_title"></view>
			<!-- <view class="img">点击查看</view> -->
			<image class="img" :src="contract_img"></image>
		</view>
		<!--我的押金条-->
		<view class="content_2">
			<view class="title">我的押金条</view>
			<view class="line_title"></view>
			<view class="img" v-if="bill_img == null" ></view>
			<image v-if="bill_img != null" class="img" :src="bill_img"></image>
		</view>
		<!--底部按钮-->
		<view class="content_3">
			<view class="btn_box">
				<view class="btn_3" style="background-color: #999999;" @click="takeOut(order_id)" >退租</view>
				<view class="btn_3" style="background-color: #63D0D5;" @click="toSign" >续租</view>
			</view>
		</view>
	</view>
</template>

<script>
	//导入接口请求文件
	import {
		Request
	} from '../../utils/request.js';
	//定义getApp对象
	const app = getApp();
	export default {
		data() {
			return {
				house_image:'',
				house_name: '',
				house_type: '',
				house_direction: '',
				house_area: '',
				house_floor: '',
				house_addr: '',
				house_tips1: '',
				house_tips2: '',
				renthouse_money: '',
				expire_time: '',
				belefttime: 0,
				state: '',
				//押金图片
				bill_img: '../../static/mine/contract_2.png',
				//合同初始图片
				contract_img: '../../static/mine/contract_1.png',
				//订单id号
				order_id:''
				
			}
		},
		methods: {
			//退租
			takeOut: function() {
				//租客申请退款接口
				new Request('customer/Apply_Refund_House_Room/ApplyOrder').request(
					() => {
						return 'POST'
					},
					() => {
						return {
							openid: app.globalData.openid,
							order_id: this.order_id,
							live_id:this.live_id,
						}
					},
					(res) => {
						if(res.data.code == 1){
							var showToast = '已发送通知申请给物主';
						}else{
							var showToast = res.data.msg;
						}
						//交互反馈
						new Request().showToast(showToast);
					}
				);
			},
			//续租,跳转至签约页面
			toSign: function() {
				uni.navigateTo({
					url: '/pages/mine/rentorder'
				})
			},
			//跳转合同页面
			GotoContract: function(){
				uni.navigateTo({
					//encodeURIComponent(JSON.stringify(webUrl))
					url: '/pages/mine/web/web?weburl=' + this.contract_url,
					// url: '/pages/mine/web/web',
				});
			}
		},
		onLoad() {
			new Request('customer/Customer_House_Room/GetCustomerHouseRoomInfo').request(
				() => {
					return 'POST'
				},
				() => {
					return {
						openid: app.globalData.openid
					}
				},
				(res) => {
					console.log(res)
					if (res.data.code == '1') {
						this.house_image = res.data.order_house_detail.house_image
						this.house_name = res.data.order_house_detail.house_name
						this.house_type = res.data.order_house_detail.house_type
						this.house_direction = res.data.order_house_detail.house_direction
						this.house_area = res.data.order_house_detail.house_area
						this.house_floor = res.data.order_house_detail.house_floor
						this.house_addr = res.data.order_house_detail.house_addr
						this.house_tips1 = res.data.order_house_detail.house_tips1
						this.house_tips2 = res.data.order_house_detail.house_tips2
						this.renthouse_money = res.data.order_house_detail.renthouse_money
						this.expire_time = res.data.order_house_detail.expire_time.substring(0, 10)
						this.paytime = res.data.order_house_detail.paytime.substring(0, 10)
						this.state = res.data.order_house_detail.open_pay_status.room_pay_status;
						this.bill_img = res.data.order_house_detail.master_receipt_image;
						//订单id号
						this.order_id = res.data.order_house_detail.order_id;
						//我的房屋id
						this.live_id = res.data.order_house_detail.live_id;
						//合同链接
						this.contract_url = res.data.order_house_detail.contract_url;
						
						//计算剩余时间
						var starttime = new Date(this.paytime.replace(/-/g, '/'))
						var endtime = new Date(this.expire_time.replace(/-/g, '/'))
						//转化为时间戳,getTime()要new Date之后才能用,不能是string类型
						starttime = starttime.getTime()
						endtime = endtime.getTime()
						//时间戳相减,剩余时间转为为月份
						this.belefttime = parseInt(((endtime - starttime) / 1000 / 3600 / 24) / 30);
						
						//提示租客房屋进度
						//1待入住,2入住成功,3拒绝入住，待退租,4退款成功,5待续租,6待上传账单,7申请退款
						let showModal = res.data.order_house_detail.open_pay_status.msg;
						let showModalStatus = res.data.order_house_detail.open_pay_status.room_pay_status;
						if(showModalStatus != 1){
							uni.showModal({
								content: showModal,
								showCancel: false,
							});	
						}
						
					} else {
						uni.showToast({
							title: '暂时没有房间',
							icon: 'none',
							position: 'center'
						})
					}
				}
			)
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}

	.content {
		padding-bottom: 190upx;
	}

	/*
		房源详细样式
	*/
	.content_1 {}

	.house_view {
		height: 246upx;
		background-color: #FFFFFF;
		border-radius: 15upx;
		padding: 27upx 24upx;
		margin-bottom: 40upx;
		display: flex;
		align-items: center;
	}

	.house_img {
		width: 304upx;
		height: 246upx;
		background-color: #8E83C7;
		margin-right: 24upx;
	}

	.house_detail {
		height: 258upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.house_name {
		height: 43upx;
		line-height: 43upx;
		font-size: 32upx;
		color: #333333;
	}

	.house_info {
		height: 35upx;
		line-height: 35upx;
		font-size: 26upx;
		color: #999999;
		width: 400upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.house_tips {
		height: 30upx;
		display: flex;
	}

	.tips {
		height: 30upx;
		line-height: 30upx;
		color: #FFFFFF;
		font-size: 20upx;
		background-image: linear-gradient(to right, #87ECC6, #8ED5EE); //颜色渐变效果(从左到右)
		margin-right: 16upx;
		padding: 0upx 20upx;
	}

	.house_money {
		height: 46upx;
		line-height: 46upx;
		font-size: 34upx;
		color: #FFC26D;
	}

	/*
		我的租期样式
	*/
	.content_2 {
		margin: 0 40upx;
		margin-top: 40upx;
		display: flex;
		flex-direction: column;
	}

	.title {
		height: 37upx;
		font-size: 28upx;
		color: #333333;
		line-height: 37upx;
	}

	.line_title {
		height: 6upx;
		width: 120upx;
		background-color: #B3E9DC;
		margin-bottom: 4upx;
	}

	.time_view {
		display: flex;
		align-items: center;
		flex-direction: column;
		margin: 0 auto;
		margin-top: 30upx;
	}

	.remain_view {
		display: flex;
		align-items: baseline;
	}

	.remain_text {
		height: 56upx;
		line-height: 56upx;
		padding-right: 30upx;
		font-size: 40upx;
		color: #101010;
	}

	.remain_time {
		height: 134upx;
		line-height: 134upx;
		font-size: 96upx;
		color: #101010;
	}

	.times {
		height: 42upx;
		line-height: 42upx;
		font-size: 32upx;
		color: #666666;
		margin-top: 30upx;
	}

	/*
		我的合同样式
	*/
	.img {
		height: 240upx;
		width: 400upx;
		background-color: #eeeeee;
		margin: 0 auto;
		margin-top: 40upx;
		text-align: center;
		line-height:240upx;
	}

	/*
		底部按钮样式
	*/
	.content_3 {
		height: 80upx;
		width: 750upx;
		position: fixed;
		z-index: 9999;
		bottom: 30upx;
		left: 0upx;
	}

	.btn_box {
		height: 80upx;
		display: flex;
		align-items: center;
		position: absolute;
		top: 0upx;
		right: 0upx;
	}

	.btn_3 {
		width: 250upx;
		height: 72upx;
		line-height: 72upx;
		font-size: 28upx;
		color: #FFFFFF;
		border-radius: 10upx;
		text-align: center;
		margin-right: 25upx;
	}
</style>
